<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CodeHope的资源库</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
        integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
    <style>
        #wrap {
            width: 100vw;
            display: flex;
            flex-wrap: wrap;
        }

        .figure {
            margin: 10px;
            box-shadow: 0px 0px 5px rgb(3, 3, 48);
        }

        .figure-caption {
            color: blueviolet;
            cursor: pointer;
            padding: 10px;
            display: inline-block;
        }

        input {
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="alert alert-primary" role="alert">
        CodeHope的常用MarkDown代码块
        <div>
            <input type="text" value='<details style="padding:15px 10px;background:#2e339c;color:#f8fafc;transition:all .3s ease;border-radius:12px;">
                <summary style="border:none;out-line:none">点击查看答案</summary>
                <p>xxxxx</p>
                <p style="background:#ee906b;color:#1b1b2a;padding:10px;border-radius:12px;">
                  xxxxxxx
                </p> 
              </details>'>
            <details style="padding:15px 10px;background:#2e339c;color:#f8fafc;transition:all .3s ease;border-radius:12px;">
                <summary style="border:none;out-line:none">点击查看答案</summary>
                <p>xxxxx</p>
                <p style="background:#ee906b;color:#1b1b2a;padding:10px;border-radius:12px;">
                  xxxxxxx
                </p> 
              </details>
        </div>
        <div class="codeflex">
            <input type="text" class='sumUp'
                value="<p style='color:#f77a72;background:#313131;padding:10px;font-weight:bolder;border-radius:15px;line-height:30px;'>【报错】</p>">
            <code>
                <p style='color:#f77a72;background:#313131;padding:10px;font-weight:bolder;border-radius:15px;line-height:30px;'>【报错】</p>
            </code>
        </div>
        <div class="codeflex">
            <input type="text" class='sumUp'
                value="<p style='color:#035766;background:#feb856;padding:10px;font-weight:bolder;border-radius:15px;line-height:30px;'>【简单总结】</p>">
            <code>
                <p style='color:#035766;background:#feb856;padding:10px;font-weight:bolder;border-radius:15px;line-height:30px;'>【简单总结】</p>
            </code>
        </div>
        <div class="codeflex">
            <input type="text" class='sumUp'
                value=" <p style='color:#eaf1f8;background:#443da6;padding:10px;font-weight:bolder;border-radius:15px;line-height:30px;'>【注意1】</p>">
            <code>
                <p style='color:#eaf1f8;background:#443da6;padding:10px;font-weight:bolder;border-radius:15px;line-height:30px;'>【注意1】</p>
            </code>
        </div>
        <div class="codeflex">
            <input type="text" class='sumUp'
                value="<p style='color:#815abd;background:#fcdc01;padding:10px;font-weight:bolder;border-radius:15px;line-height:30px;'>【问题1】</p>">
            <code>
                <p style='color:#815abd;background:#fcdc01;padding:10px;font-weight:bolder;border-radius:15px;line-height:30px;'>【问题1】</p>
            </code>
        </div>
        <div class="codeflex">
            <input type="text" value=' <img src="http://qiniuyun.quancundexiwang.wang/20210312153030.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?"  />'>
            <code>
                <img src="http://qiniuyun.quancundexiwang.wang/20210312153030.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?"
                    style='zoom:50%;' />
            </code>
        </div>
        <div class="codeflex">
            <input type="text"
                value='<img src="http://qiniuyun.quancundexiwang.wang/20210313180142.jpg" style="zoom:100%;" />'>
            <code>
                <img src="http://qiniuyun.quancundexiwang.wang/20210313180142.jpg" style="zoom:60%;" />
            </code>
        </div>
        <div>
            <input type="text" value="<span style='border-radius:50%;width:30px;height:30px;background-color:#FF6C00;color:#2A3950;display:inline-block;text-align:center;font-weight:bolder;line-height:30px;'>1</span>
        Step1">
            <span
                style='border-radius:50%;width:30px;height:30px;background-color:#FF6C00;color:#2A3950;display:inline-block;text-align:center;font-weight:bolder;line-height:30px;'>1</span>
            Step1
        </div>

        <div>
            <input type="text" value=" <span style='border-radius:50%;width:30px;height:30px;background-color:#C30F2A;color:#F7FBF8;display:inline-block;text-align:center;font-weight:bolder;line-height:30px;'>2</span>
        Step2">
            <span
                style='border-radius:50%;width:30px;height:30px;background-color:#C30F2A;color:#F7FBF8;display:inline-block;text-align:center;font-weight:bolder;line-height:30px;'>2</span>
            Step2
        </div>

        <div>
            <input type="text" value="<span style='border-radius:50%;width:30px;height:30px;background-color:#E1D20F;color:#0867EF;display:inline-block;text-align:center;font-weight:bolder;line-height:30px;'>3</span>
        Step3">
            <span
                style='border-radius:50%;width:30px;height:30px;background-color:#E1D20F;color:#0867EF;display:inline-block;text-align:center;font-weight:bolder;line-height:30px;'>3</span>
            Step3
        </div>

        <div>
            <input type="text" value=" <span style='border-radius:50%;width:30px;height:30px;background-color:#65E8BE;color:#E67881;display:inline-block;text-align:center;font-weight:bolder;line-height:30px;'>4</span>
        Step4">
            <span
                style='border-radius:50%;width:30px;height:30px;background-color:#65E8BE;color:#E67881;display:inline-block;text-align:center;font-weight:bolder;line-height:30px;'>4</span>
            Step4
        </div>
    </div>
    <div class="alert alert-primary" role="alert">
        CodeHope的资源库
    </div>
    </div>
    <figure id="wrap" class="figure d-flex flex-row bd-highlight mb-3">
    </figure>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<script src="http://jq22.qiniudn.com/masonry-docs.min.js"></script>
<script>
    $(document).ready(function () {
        //getImageList 获取图片数据
        const getImageList = function () {
            return new Promise((resolve, reject) => {
                $.ajax({
                    url: "http://127.0.0.1:3000/qny/statics",
                    method: "get",
                    success: function (res) {
                        resolve(res)
                    },
                    error: function (e) {
                        reject(e)
                    }
                })
            })
        }
        getImageList().then((result) => {
            const list = result.data;
            list.forEach(item => {
                const img = document.createElement("img")
                const figcaption = document.createElement("figcaption")
                const figure = document.createElement("figure")
                const spanEl = document.createElement("span")
                spanEl.innerHTML = "原图";
                spanEl.addEventListener("click", function () {
                    window.open(item);
                })
                figure.setAttribute("class", "figure")
                figcaption.setAttribute("class", "figure-caption");
                spanEl.setAttribute("class", "figure-caption");
                figcaption.setAttribute("data", item);
                figcaption.innerHTML = "复制url";
                figure.appendChild(img)
                figure.appendChild(figcaption)
                figure.appendChild(spanEl)
                figcaption.addEventListener("click", function () {
                    const input = document.createElement("input");
                    document.body.appendChild(input);
                    input.setAttribute("value", item);
                    //input.setAttribute("style","display:none");
                    input.select()
                    document.execCommand("copy");
                    alert("复制成功！")
                    document.body.removeChild(input);
                })
                img.setAttribute("width", "100%")
                img.setAttribute("height", "100%")
                img.setAttribute("style", "height:100px;width:100px;object-fit:cover;")
                img.setAttribute("src",
                    "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3416610594,1723780823&fm=26&gp=0.jpg"
                )
                img.setAttribute("srcData", `${item}^simply`);
                img.setAttribute("class", "figure-img img-fluid rounded");
                document.querySelector("#wrap").appendChild(figure)
                window.addEventListener("load", function () {
                    renderImg(img)
                })
                window.addEventListener("scroll", function () {
                    renderImg(img)
                })
            })
        })

        function renderImg(img) {
            if (img.getBoundingClientRect().top < window.innerHeight) {
                img.setAttribute("src", img.getAttribute("srcData"))
            }
        }

        function copyCode(id) {
            document.querySelector(`#${id}`).select();
            document.execCommand("copy")
        }
    })
</script>